You find a website whose look you love. Maybe it's the open spacing, the thin serif headlines, or the way one photo fills the whole top of the page. The Brief Builder studies a screenshot of that page, writes down what makes it work, and helps you turn that into a brief for your own photography landing page.
You walk away with two briefs. The short brief is what you paste into Claude Design first. The long brief holds your full copy and extra rules for when you want more control.
You are borrowing a style, not copying a page. The most important line you will write is the one that says what you want to change from the reference.
Before you start
What you need
- The
brief-builder.htmlfile saved somewhere on your computer. Double-click it to open it in your browser. Chrome, Safari, Edge, and Firefox all work. - An Anthropic API key. You get one at console.anthropic.com under API Keys. You will need to add a small amount of credit to your account.
- A screenshot of a page you like.
- Your own photos and logo, ready to attach in Claude Design later.
Add your key
The first time you open the tool, the Settings panel is already open. Paste your key into the Anthropic API key field and click Save & close. The small dot in the top right turns green and shows which model you're using.
Click Update models once after you save your key. It pulls the current list of Claude models from Anthropic, so the tool keeps working when new models come out. If you aren't sure which to pick, choose the newest Sonnet.
Your key is saved in this browser on this computer only. It goes to Anthropic when you click Analyze and nowhere else. Don't share the HTML file with your key typed into it on a shared computer, and never post your key anywhere public.
What it costs
Each analysis is one request to Claude with one image. It typically costs a few cents. Building the briefs in step 3 happens inside your browser and costs nothing, so you can edit and rebuild as many times as you like.
Upload a design you love
Drag a screenshot onto the upload box or click it to browse. The tool shrinks large images automatically and reads the colors directly from the pixels. You'll see small color chips under the preview labeled Sampled. Those are the real colors in your image.
What makes a good reference
- Take a full-page screenshot at desktop width. The more of the page Claude can see, the better it understands the layout. On a Mac, Cmd+Shift+4 grabs part of the screen. Chrome's developer tools can capture a full-length page.
- Pick a page with a design you like, not just photos you like. A portfolio full of gorgeous images can have a dull layout. Look at the spacing, the type, and how the sections are arranged.
- It doesn't have to be a photographer's site. A restaurant, a furniture maker, or a magazine can all teach you something. Some of the best references come from outside your field.
- One page per run. If you like the header from one site and the colors from another, run the first, then add the second idea by hand in the Change field.
Analyze, or skip
Click Analyze this design. In about 20 seconds you'll see Claude's study of the page appear, and then the form below fills in with what it found.
If you'd rather work it out yourself, or you don't have a key yet, click Skip, I'll fill it in myself. You can still build both briefs by hand.
Make it yours
This is where the work happens. Claude has filled in what it saw on the reference page. Your job is to adjust it to fit your business. Any field you leave blank is left out of the brief, so you only need to fill in what matters to you.
Each card has a small tag in the corner. Both briefs means the field shows up in the short and long brief. Long brief means it only goes in the long one.
About your page
Your business name as it should appear on the page.
Be specific. "Weddings and family portraits" works better than "photography."
Your city or region. Clients search locally, and it gives Claude Design context for the copy.
The client you want to attract. "Couples planning small desert weddings" tells Claude Design far more than "couples."
One action. Book a call, request a quote, see pricing. Pick one and the page will be built around it.
Design direction
Style, tone, spacing, and signature detail come from the analysis. Read them and change any word that doesn't sound right to you.
The two fields that matter most are Keep and Change.
Keep lists what you want carried over from the reference. Claude fills this in for you.
Change is left blank on purpose. Only you know how your page should differ. Without this line, Claude Design will give you something very close to the reference. With it, you get your own page.
Color and type
The palette has four roles: Background, Text, Primary, and Accent. Claude assigns the sampled colors to these roles, but you can change any of them three ways:
- Click a role (it gets an outline), then click one of the sampled chips below to fill it.
- Click the color square to open your system's color picker.
- Type a hex code like
#C4693Dinto the field.
If your logo has a color in it, use that color as your Primary or Accent. Your page and your logo should look like they belong together.
For fonts, Claude suggests the closest Google Fonts it can find. You can type in any font name. The Logo note field is a good place to tell Claude Design something like "black wordmark, keep it small in the top left."
Sections and copy
Check the sections you want on your page. They appear in your brief in the order shown. Hero, Introduction, Service Cards, Testimonials, and Contact are on by default. Gallery and About are off until you check them.
Each checked section opens up so you can write copy for it. Copy is optional. If you leave it blank, the brief asks Claude Design to write placeholder text you can replace later. Many students find it easier to see the layout first and write copy after.
Only use real words from real clients, with their permission. If you don't have testimonials yet, leave the fields blank or uncheck the section. A page with no testimonials is fine. A page with invented ones is a problem.
Guardrails
These only go in the long brief. Avoid is for things you don't want, like stock icons, drop shadows on photos, or parallax scrolling. On phones tells Claude Design how the page should behave on a small screen. Most of your visitors will see it on a phone first.
When you're happy with everything, click Build my briefs.
Your briefs
You'll see three tabs. Each brief tab shows a word count, and each has a Copy button and a Download .md button. Downloads are named after your studio so you can keep them organized.
Start here
About 100 to 150 words. Your business, the Keep and Change lines, colors, fonts, spacing, and the section order. It gives Claude Design clear direction and leaves room for it to make good layout choices.
For more control
Everything in the short brief plus your copy for each section, your Avoid list, and phone instructions. Use it when your copy is ready, or paste parts of it into later messages.
The Design Study tab holds Claude's written analysis of the reference page. It isn't part of either brief. Read it to understand why the page works. It's a good way to train your eye.
A sample short brief
Need to change something? Click Back to editing, adjust the fields, and click Build my briefs again. Nothing is lost.
Using it in Claude Design
- Start a new design in Claude.
- Attach your reference screenshot. Claude Design can see it, which is why the brief doesn't need to describe every detail.
- Attach your logo and photos. If you can, say which photo goes where: "hero.jpg is the couple on the dunes, card1.jpg is the ceremony."
- Paste the short brief and send it.
- Look at the first version before asking for anything.
Asking for changes
Ask for one or two changes at a time. A list of fifteen fixes in one message tends to get half of them done. Short, specific requests work best.
When to bring in the long brief
Once the layout feels right, paste the Sections part of the long brief to replace the placeholder text with your real copy. Paste the Guardrails part if something keeps showing up that you don't want.
Before you call it done, ask Claude Design to show you the phone version. Most clients will find you on their phone, often from a link someone texted them.
Troubleshooting
"Your API key was rejected"
Open Settings and paste your key again. Make sure you copied the whole thing, starting with sk-ant-, with no spaces at the ends. If it still fails, check at console.anthropic.com that the key is active and your account has credit.
"That model isn't available"
Anthropic retires older models from time to time. Open Settings, click Update models, pick the newest Sonnet from the list, and click Save & close.
My image won't open
iPhone photos are often saved as HEIC files, which most browsers can't open. Take a screenshot of the image instead, or export it as a JPG from the Photos app. PNG, JPG, and WebP all work.
The study appeared but the fields stayed empty
Once in a while Claude's answer comes back in a shape the tool can't read. The tool will tell you when this happens. Click Analyze again, which usually fixes it, or fill in the fields yourself using the study as a guide.
The colors look wrong
If the reference page has large photos, the photos' colors can crowd out the page design colors. Look at the sampled chips and reassign them by clicking a role and then a chip. You can also type in any hex code you like.
The Copy button doesn't work
Some browsers block copying from files opened directly from your computer. Use Download .md instead, then open the file and copy from there. Or click inside the brief, press Cmd+A (Ctrl+A on Windows), and copy.
Do I lose everything if I close the tab?
Your API key and model choice are saved. Your form entries are not. Download your briefs before you close the tab if you want to keep them.
Claude Design made something that looks just like the reference
Your Change line is probably empty or too gentle. Go back, write two or three specific differences, rebuild the brief, and start a fresh design with it.